<template>
  <div>
    <el-dialog title="打印标签" width="600px" class="icon-dialog" :visible.sync="show" :before-close="closeForm"
      append-to-body @open="open">
      <el-form ref="form" :size="size" :model="form" :label-width="$store.getters.device !== 'mobile'?'18%':'90px'">
        <div ref="print" id="printable-content">
              <table style="font-size:10px;">
                <tbody>
                  <tr v-for="(item, index) in form.goods" :key="index">
                    <td style="margin: 0px;padding: 0px;">
                      <table style="font-size:12px;">
                        <tr >
                          <td style="margin: 0px;padding: 0px;">
                            <div style="height: 14px;overflow-x: hidden;overflow: hidden;margin: 0px;padding: 0px;">
                           {{item.name}} 单号:{{form.orderInfo.order_num_alias}}
                            </div></td>
                        </tr>
                      </table>
                      <table style="font-size:12px;">
                        <tr >
                          <td width="100">数量: {{ index+1 }}/{{ form.goodscount }}</td>

                          <td  width="270" style="margin: 0px;padding: 0px;">
                            <div style="height: 14px;overflow-x: hidden;overflow: hidden;margin: 0px;padding: 0px;">
                            {{form.orderInfo.member.nicknamesub}}
                            <span v-if="form.orderInfo.shipping_tel">
                               {{form.orderInfo.shipping_tel}}
                            </span>
                            <span v-else>
                               <span v-if="form.orderInfo.member">{{form.orderInfo.member.telephone}}</span>
                            </span>
                            </div>
                           </td>
                        </tr>
                      </table>
                      <table style="font-size:12px;">
                        <tr >
                          <td style="margin: 0px;padding: 0px;">
                            <div style="height: 14px;overflow-x: hidden;overflow: hidden;margin: 0px;padding: 0px;">
                            备注: {{item.customtextsubstr }}
                            </div></td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
        </div>
        <div style="margin-top: 30px;">
          <!--<el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="form.orderInfo.remark" auto-complete="off" maxlength="20" clearable placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>-->
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printfBarCode">确定打印</el-button>
        <el-button @click="closeForm">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ImagesUpload from '@/components/common/ImagesUpload.vue'
  export default {
    name: 'Orderdetail',
    components: {
      ImagesUpload
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: 'mini'
      },
      info: {
        type: Object
      }
    },
    data() {
      return {
        form: {
          orderInfo: {
            orderStatus: {},
            address: {},
            paymethod: {},
            member: {}
          }
        },
        loading: false
      }
    },
    watch: {
      show(val) {}
    },
    methods: {
      open() {
        this.form = this.info
      },
      submit() {
            this.loading = true
            this.form.words = '打印标签';
            this.$api.post('/order/update', this.form).then(res => {
            })
      },
      //确认打印
      printfBarCode() {
        this.submit();
        const printNode = this.$refs.print
        // console.log('printNode',printNode.innerHTML);
        if (!printNode) return
        const newIframe = document.createElement('iframe');
        newIframe.setAttribute('style', 'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;');
        newIframe.setAttribute('align', 'center');
        document.body.appendChild(newIframe);
        // 将打印页面设置为内框架内容
        let doc = null;
        doc = newIframe.contentWindow.document;
        doc.write(`<div style="width:100%;height:auto;text-align:left;">${printNode.innerHTML}</div>`)
        doc.close();
        // 浏览器打印页面打开渲染
        setTimeout(() => {
          newIframe.contentWindow.focus();
          newIframe.contentWindow.print();
          document.body.removeChild(newIframe); // 移除打印内框架，下次打印下次再挂载
        }, 500);

      },
      closeForm() {
        this.$emit('update:show', false)
        this.loading = false
        if (this.$refs['form'] !== undefined) {
          this.$refs['form'].resetFields()
        }
      }
    }
  }
</script>
<style>
  .image__preview {
    float: left;
    padding-right: 5px;
  }

  .goodsdetailtext {
    float: left;
    padding-left: 5px;
  }

  .table_list_pic {
    width: 60px;
    height: 60px;
  }
</style>
